<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li class="active"><a href="user.html"><i class="icon-person"></i><span>用户管理</span></a><em class="open"></em>
        <ul>
          <li><a href="user.html">用户管理</a></li>
          <li class="active"><a href="user-role.html">角色管理</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>角色管理</h2></div>

    <div class="sys-content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>角色列表</h3>
          </div>
          <div class="btnbar"> <button class="btn btn-success" id="add">添加角色</button></div>

          <div class="filter">
            <input type="text" placeholder="请输入角色名称关键词查询"> <button class="btn">检索</button>
          </div>
        </div>
        <div class="panel-body">

          <table class="table table-striped">
            <thead>
              <tr>
                <th width="5%">序号</th>
                <th>角色名称</th>
                <th width="28%">权限</th>
                <th>用户数量</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td><a href="javascript:void(0);">平台管理员</a></td>
                <td>平台所有权限</td>
                <td>1</td>
                <td>平台所有权限</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="修改"></i></a></td>
              </tr>
              <tr>
                <td>2</td>
                <td><a href="javascript:void(0);">采集系统管理员</a></td>
                <td>数据源管理、采集任务管理、数据采集监控、录入工具</td>
                <td>2</td>
                <td>采集系统所有权限</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td>3</td>
                <td><a href="javascript:void(0);">分析系统管理员</a></td>
                <td>分析系统所有权限</td>
                <td>6</td>
                <td>分析系统所有权限</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td>4</td>
                <td><a href="javascript:void(0);">警务系统角色</a></td>
                <td>超级管理员、站长、警员</td>
                <td>5</td>
                <td>外接第三方系统</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
              <tr>
                <td>5</td>
                <td><a href="javascript:void(0);">资源目录系统用户</a></td>
                <td>上传、下载</td>
                <td>2421</td>
                <td>资源目录系统一般用户</td>
                <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
              </tr>
            </tbody>
          </table>
        </div><!--panel-body end-->
        <div class="panel-foot">
          <div class="btns"></div>
          <div class="page">
            <ul class="pagination">
              <li class="disabled"><a href="javascript:void(0);">&lt;</a></li>
              <li class="active"><a href="javascript:void(0);">1</a></li>
              <li><a href="javascript:void(0);">2</a></li>
              <li><a href="javascript:void(0);">3</a></li>
              <li><a href="javascript:void(0);">4</a></li>
              <li><a href="javascript:void(0);">5</a></li>
              <li><a href="javascript:void(0);">&gt;</a></li>
              <li class="go"><input type="text" title="输入页码跳转"></li>
            </ul>
          </div>
        </div><!--panel-foot end-->
      </div>
    </div>
  </div>


  <div class="dialog dialog-sm">
    <div class="dialog-win">
      <div class="dialog-head"><span>添加角色</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
      <div class="dialog-body">

        <div class="form-box" style="display:block;">
          <div class="form-item">
            <div class="form-title">角色名称：</div>
            <div class="form-content"><input  class="input" value="" type="text"></div>
          </div>
          <div class="form-item">
            <div class="form-title">角色权限：</div>
            <div class="form-content"><ul id="role"  class="ztree box" style="max-height:420px; overflow:auto;"></ul></div>
          </div>
        </div>

      </div>
      <div class="dialog-foot"><button class="btn" id="save">确认</button><button id="cancel" class="btn btn-minor">取消</button></div>
    </div>
  </div>
  <!--dialog end-->
</body>
</html>
<script>
  var setting = {
    check: {
      enable: true
    },
    data: {
      simpleData: {
        enable: true
      }
    }
  };

  var zNodes =[
  { id:1, pId:0, name:"数据采集系统", open:true},
  { id:11, pId:1, name:"数据源管理"},
  { id:12, pId:1, name:"采集任务管理"},
  { id:13, pId:1, name:"数据采集监控"},
  { id:14, pId:1, name:"录入工具"},

  { id:2, pId:0, name:"数据分析系统", open:true},
  { id:21, pId:2, name:"特征综合关联系统"},
  { id:22, pId:2, name:"综合关联分析系统"},
  { id:23, pId:2, name:"重点区域安全防控系统"},

  { id:3, pId:0, name:"数据交换系统"},
  { id:31, pId:3, name:"共享管理"},
  { id:32, pId:3, name:"交换管理"},
  { id:33, pId:3, name:"配置管理"},

  { id:4, pId:0, name:"数据资源目录"},
  { id:41, pId:4, name:"公安信息服务"},
  { id:42, pId:4, name:"数据清洗对比"},
  { id:43, pId:4, name:"审批管理"},
  { id:44, pId:4, name:"系统管理"},
  { id:45, pId:4, name:"公众用户", open:true},
  { id:46, pId:45, name:"资源访问"},
  { id:47, pId:45, name:"资源下载"},
  { id:48, pId:45, name:"资源上传"},


  { id:5, pId:0, name:"大数据平台"},
  { id:51, pId:5, name:"门户网站管理"},
  { id:52, pId:5, name:"hadoop 集群管理"},
  { id:53, pId:5, name:"搜索引擎管理"}
  ];

  $(document).ready(function(){
   $("#add").on("click",function(){
    $(".dialog").show();
  })

   $(".dialog .close,#cancel").on("click",function(){
    $(".dialog").hide();
  })
   $.fn.zTree.init($("#role"), setting, zNodes);
 })

</script>